<template>
  <div class="minaddBxo" v-loading="loading">
      <el-form label-width="120px" label-position="top" :model="addForm" ref="addForm">
          <el-form-item :label="name+'方：'" prop="name" :rules="{required: true, message: name+'方信息不能为空', trigger: 'blur'}">
              <el-input size="small" v-model="addForm.name" auto-complete="off" :placeholder="`请输入${name}方信息`"></el-input>
          </el-form-item>
          <el-form-item label="币种：" prop="coin" :rules="{required: true, message: '请选择币种', trigger: 'blur'}">
              <el-select size="small" v-model="addForm.coin" placeholder="请选择币种">
                  <el-option v-for="item in asTypeArr" :label="item.name" :value="item.value" :key="item.value"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="资金所在地：" prop="assetAddress" :rules="{required: true, message: '资金所在地不能为空', trigger: 'blur'}">
              <el-input size="small" v-model="addForm.assetAddress" auto-complete="off" placeholder="请输入资金所在地"></el-input>
          </el-form-item>
          <el-form-item label="金额：" prop="amount" :rules="{required: true, message: '金额不能为空', trigger: 'blur'}">
              <el-input size="small" type="number" v-model="addForm.amount" auto-complete="off" placeholder="请输入金额"></el-input>
          </el-form-item>
          <el-form-item :label="name+'方钱包地址：'" prop="coinAddress" :rules="{required: true, message: '钱包地址不能为空', trigger: 'blur'}">
              <el-input size="small" v-model="addForm.coinAddress" auto-complete="off" :placeholder="`请输入${name}方钱包地址`"></el-input>
          </el-form-item>
          <el-form-item label="是否已亮资：" prop="showAsset" :rules="{required: true, message: '请选择', trigger: 'blur'}">
            <el-radio-group v-model="addForm.showAsset">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否已验资：" prop="vAsset" :rules="{required: true, message: '请选择', trigger: 'blur'}">
            <el-radio-group v-model="addForm.vAsset">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="相关资料扫描件：" prop="detail" :rules="{required: true, message: '相关资料扫描件不能为空', trigger: 'blur'}">
            <div class="imageBox">
                    <div class="uploadBox" @click="onupload()">
                        <img src="../../../assets/img/upload.png" alt="" >
                        <p>点击或将文件拖拽到这里上传</p>
                        <span>支持Jpg、png等格式，最多6张，每张<br />大小在10m以内</span>
                    </div>
                    <div v-if="imageArr && imageArr.length > 0" class="imgsarr">
                        <div v-for="(imgs,index) in imageArr">
                            <img :src="imgs" alt="" >
                            <p @click="remove(index)">删除图片</p>
                        </div>
                    </div>
                </div>
              <!-- <el-input size="small" v-model="addForm.detail" auto-complete="off" placeholder="请输入相关资料扫描件"></el-input> -->
          </el-form-item>
          <input type="file" ref="inputRef" @change="handleFileUpload" accept="image/*" :multiple="false" class="none" />
      </el-form>
     
      <div class="minaddBxo-footer">
          <button @click="submitForm('addForm')">提交</button>
      </div>
  </div>
</template>

<script>
import { CommitA , CommitB} from '../../../api/userMG'
import { upHttp } from '../../../api/axiosFun'
export default {
  props: ['name','swapId'],
data() {
  return {
    loading:false,
    
    addForm: {
      "swapId": this.swapId,
      "name": "",
      "coin": "",
      "assetAddress": "",
      "amount": "",
      "showAsset": "",
      "vAsset": "",
      "coinAddress": "",
      "detail": ""
    },
    imageArr:[
        // 'http://192.168.0.185:11990/api/m/file/preview/1000090999/9995544407965696',
        ],

    asTypeArr:[
      {name:'美元',value:'美元'},
      {name:'人民币',value:'人民币'},
      {name:'港币',value:'港币'},
    ],
  }
},

methods: {
  submitForm(formName){
      this.$refs[formName].validate(valid => {
          if (valid) {
              this.loading = true;
              if(this.name == 'A'){
                CommitA(this.addForm).then(res => {
                    this.loading = false;
                    if (res.code != 0) {
                        this.$message({
                            type: 'info',
                            message: res.message
                        })
                    } else {
                        this.$message({
                            type: 'success',
                            message: '提交成功!'
                        })
                        this.$emit('onNext',this.name, (res.data && res.data.swapId)?res.data.swapId:0)
                    }
                })
              }else{
                CommitB(this.addForm).then(res => {
                    this.loading = false;
                    if (res.code != 0) {
                        this.$message({
                            type: 'info',
                            message: res.message
                        })
                    } else {
                        this.$message({
                            type: 'success',
                            message: '提交成功!'
                        })
                        this.$emit('onNext',this.name, (res.data && res.data.swapId)?res.data.swapId:0)
                    }
                })
              }
              
          }
      })
      return
  },onupload(){
        if(this.imageArr.length == 6){
            this.$message({
                type: 'info',
                message: "图片最多为6张"
            })
            return
        }
        this.$refs.inputRef.value = '';
        this.$refs.inputRef.click()
    },
    remove(idx){
        this.imageArr.forEach((item, index)=> {
            if(index == idx) {
                this.imageArr.splice(index, 1);
            }
        });
        this.addForm.detail = JSON.stringify(this.imageArr)
    },
    // 上传
    async handleFileUpload(event){
      console.log(event)
      let formData = new FormData()
      let file = event.target.files[0]
      console.log(file)
      // let blob = new Blob([file]);
      formData.append('file', file)
      let res = await upHttp('/api/m/File/upload/1000090999', formData)
    //   debugger
      console.log('res')
      console.log(res)
      if (res && res.code == 0) {
        this.$message({
          type: 'success',
          message: '上传成功！'
        })

        this.imageArr.push(res.data.fullPah)
        this.addForm.detail = JSON.stringify(this.imageArr)
        
      } else {
        this.$message({
          type: 'info',
          message: res && res.message || '上传失败'
        })
      }
    },
}
}
</script>

<style scoped>
  .ipt_div{
      text-align: center;
      border: 1px solid #DCDFE6;
      border-radius: 4px;
      height: 40px;
  }
  .minaddBxo{
      width: 900px;
      margin: 0 auto;
  }
  .minaddBxo .el-select{
      width: 100%;
  }
  .minaddBxo /deep/ .el-form-item__label{
      padding: 0 !important;
  }

  .minaddBxo /deep/ .el-input__inner{
      line-height: 40px;
      height: 40px;
      text-align: center;
  }
  .minaddBxo-footer button{
      background:#1C1E22;
      color: #fff;
      border-radius: 30px;
      width: 300px;
      border:0;
      line-height: 46px;
      font-size: 16px;
      margin: 50px auto 100px;
      display: block;
      cursor: pointer;
  }
</style>